<template>
    <div>
        <div class="field">
            <input placeholder="请输入姓氏"
            v-focus
            v-model="ipt"
            class="field-ipt">
            <input placeholder="请输入电话号码" class="field-ipt" 
            v-model="telephone">
            <select v-model="gender">
                <option value="">选择性别</option>
                <option @click="changeSex('')">男生</option>
                <option>女生</option>
            </select>
            <button class="btn" @click="enterFun">添加联系人</button>
        </div>
        <div class="body" v-for="(item,index) in list" :key="index" >
            <img v-if="item.gender=='男生'" src="../assets/男生.svg" alt="" class="body-img">
            <img v-else src="../assets/女生.svg" alt="" class="body-img">
            <div class="body-msg">
                <p>{{item.name}}</p>
                <p>{{item.telephone}}</p>
            </div>
            <div><p>{{ showTime(time) }}</p></div>
            <button  @click="deletePeople(index)" class="body-delete">x</button>
        </div>
    </div>
</template>
<script>
import Moment from 'moment'

 var store ={
     get(name){
         const value =localStorage.getItem(name);
         if(value){
             return JSON.parse(value)
         }
     },
     set(name,list){
         localStorage.setItem(name,JSON.stringify(list))
     }
 }
export default {
    name:'people',
    data() {
        return {
            ipt:'',
            telephone:'',
            gender:'',
            list:[
                {name:'东东', telephone:18888888888,gender:'男生',time:new Date()},
                {name:'西西', telephone:17777777777,gender:'女生',time:new Date()},
            ],
            // list:store.get()
        }
    },
    methods:{
        enterFun(){
            console.log('isName===>',this.ipt);
            this.list.push({
               name:this.ipt,
               telephone:this.telephone,
               gender:this.gender,
               time:new Date()
            })
            this.ipt='';
            this.telephone='';
            this.gender='';
            store.set("feild",this.list)
        },
        changeSex(gender){
            this.gender=gender
        },
        showTime(time){
            return Moment(time).format('MM-DD hh:mm:ss')
        },
        deletePeople(index){
            return this.list.splice(index,1)
        }
        
    }
}
</script>
<style lang="scss">
    .field{
       height: 80px;
       display: flex;
       justify-content: space-between;
       text-align: center;
       align-items: center;
       &-ipt{
           height: 30px;
           width: 100px;
           border-radius: 10px;
           outline: none;
           text-indent: .5em;
       }
    }
    .gender{
        padding: 0;
        margin: 0;
        &-boy{
            width: 30px;
            height: 20px;
            background-color: rgb(35, 95, 145);
        }
        &-girl{
            width: 30px;
            height: 20px;
            background-color: pink;
        }
    }
    .btn{
        height: 30px;
        background-color: rgb(187, 221, 210);
        outline: none;
        border-radius: 20px;
    }
    .body{
        display: flex;
       align-items: center;
       height: 60px;
       border:1px solid;
       background-color: #fff;
       &-img{
           width:50px;
           height: 50px;
            background-color:rgb(187, 221, 210);
            border-radius: 50%;
       }
       &-msg{
           padding: 0;
           margin: 0;
       }
       p{
           display:flex;
           width:200px;
           margin:auto;
       }
       &-delete{
           font-size: 15px;
            border-radius:20px;
            background-color: rgb(159, 211, 211);
            color:rgb(185, 5, 5);
            position: fixed;
            right: 0;
            outline:none;
            // display: none;
       }
    }
       .body-delete:hover{
           display: flex;
       }
</style>